/**
 * 首先拿到数据，渲染在页面上
 */

function getTypeData() {
  Ajax({
    type: "GET",
    url: "http://localhost/project/server/typeManager.php",
    success(msg) {
      // 当前页是第一页
      sessionStorage.setItem("currentPage", 1);
      // 将数据存储一份到storage里面
      sessionStorage.setItem("typeInfo", msg);
      // 先将数据变为对象数组数据
      msg = JSON.parse(msg).slice(0, 10);
      render(msg);
    },
  });
}
getTypeData();

/**
 * 渲染的方法
 */
function render(msg) {
  // 渲染
  // 首先获取元素tbody
  const tbody = document.querySelector("tbody");

  //先清空内容，再渲染
  tbody.innerHTML = "";
  msg.forEach((item) => {
    let str = `
        <tr>
            <td>
                <input type="checkbox" name="" id="${item.fid}" class="one">
            </td>
            <td>${item.fid}</td>
            <td>${item.ftype}</td>
            <td>
              <button class="btn btn-warning btn-sm" id=${item.fid} data-upd='upd' data-bs-toggle="modal" data-bs-target="#myModal1">修改</button>
              <button class="btn btn-danger btn-sm" id=${item.fid} data-del='del' onclick="deleteOne()">删除</button>
            </td>
        </tr>
        `;

    tbody.innerHTML += str;
  });
}

// 首页 index
function index() {
  // 首先将分页的页数改为第一页
  sessionStorage.setItem("currentPage", 1);
  // 拿到数据，渲染
  let msg = sessionStorage.getItem("typeInfo");
  msg = JSON.parse(msg).slice(0, 10);
  render(msg);
}

// 上一页
function up() {
  // 获取当前页
  let currentPage = +sessionStorage.getItem("currentPage");
  currentPage = currentPage - 1;
  // 当前页不能小于1
  if (currentPage < 1) {
    currentPage = 1;
  }
  sessionStorage.setItem("currentPage", currentPage);
  // 计算出当前页的数据
  let typeInfo = sessionStorage.getItem("typeInfo");
  typeInfo = JSON.parse(typeInfo).slice(
    (currentPage - 1) * 10,
    currentPage * 10
  );
  // 渲染数据
  render(typeInfo);
}

// 下一页
function down() {
  //获取当前页
  let currentPage = +sessionStorage.getItem("currentPage");
  //计算出当前页的数据
  let typeInfo = sessionStorage.getItem("typeInfo");
  typeInfo = JSON.parse(typeInfo);
  //当前页不能大于尾页
  currentPage = currentPage + 1;
  if (currentPage > Math.ceil(typeInfo.length / 10))
    currentPage = Math.ceil(typeInfo.length / 10);

  sessionStorage.setItem("currentPage", currentPage);
  typeInfo = typeInfo.slice((currentPage - 1) * 10, currentPage * 10);
  //渲染数据
  render(typeInfo);
}

// 尾页 last
function last() {
  // 获取所有的用户数据
  let typeInfo = sessionStorage.getItem("typeInfo");
  // 转换为对象
  typeInfo = JSON.parse(typeInfo);
  // 计算当前页,计算出最后一页的数据
  sessionStorage.setItem("currentPage", Math.ceil(typeInfo.length / 10));
  // 计算末尾页的数据
  typeInfo = typeInfo.slice(
    Math.floor(typeInfo.length / 10) * 10,
    typeInfo.length
  );
  render(typeInfo);
}

/**
 *  进行全选功能
 * */
function checkedFuntion() {
  //获取全选框元素
  const all = document.querySelector("#all");
  const ones = document.getElementsByClassName("one");
  //1. 先做全选
  all.onclick = function () {
    for (var i = 0; i < ones.length; i++) {
      ones[i].checked = this.checked;
    }
  };

  /* 
  点击单选
      1. 遍历四个单选
      2. 给每一个绑定点击事件
      3. 在触发点击的时候,统计每一个单选的选中个数,如果选中的个数等于单选的长度,那么多选选中,否则就不要选中
        */
  // 1. 遍历四个单选
  for (var i = 0; i < ones.length; i++) {
    // 2. 给每一个绑定点击事件
    ones[i].onclick = function () {
      //开始统计
      var count = 0;
      //进行统计
      for (var j = 0; j < ones.length; j++) {
        if (ones[j].checked === true) {
          count++;
        }
      }
      // console.log(count);
      // 如果选中的个数等于单选的长度,多选选中
      if (count == ones.length) {
        all.checked = true;
      } else {
        all.checked = false;
      }
    };
  }
}

checkedFuntion();

//批量删除
function deleteAll() {
  let ones = document.querySelectorAll(".one");

  // 判断哪些one被选中,若被选中,发送ajax删除
  for (let i = 0; i < ones.length; i++) {
    if (ones[i].checked) {
      // 循环发送ajax;
      Ajax({
        type: "GET",
        url: "http://localhost/project/server/typeDeleteAll.php",
        data: { id: ones[i].id },
        success() {
          location.reload();
        },
      });
    }
  }
}

// 删除一条数据,用事件的委派来做
const tbody1 = document.querySelector("#tbody1");
tbody1.onclick = function (e) {
  // console.log(e.target.id);
  if (e.target.dataset.del == "del") {
    const res = confirm("是否确定删除?");
    if (res) {
      Ajax({
        url: "http://localhost/project/server/typeDeleteOne.php",
        data: { id: e.target.id },
        success() {
          location.reload();
        },
      });
    }
  }
  // 先让修改的内容显示在value框，修改
  if (e.target.dataset.upd == "upd") {
    // console.log(e.target.id);
    Ajax({
      url: "http://localhost/project/server/updateOneType.php",
      data: { id: e.target.id },
      success(msg) {
        // 将json转换为对象
        msg = JSON.parse(msg)[0];
        document.querySelector("#movieType").value = msg.ftype;

        // 渲染的用户编号
        document.querySelector("#updatesid").value = msg.fid;
      },
    });
  }
};

// 添加操作
function flimTypeAdd() {
  const ftype = document.getElementById("ftype");
  let filmType = ftype.value;
  if (filmType != "") {
    Ajax({
      url: "http://localhost/project/server/filmTypeAdd.php",
      data: { filmType },
      success() {},
    });
  } else {
    return alert("输入不能为空！");
  }
}

// 修改操作
function updateType() {
  const id = document.querySelector("#updatesid").value;

  const ftype = document.querySelector("#movieType").value;

  Ajax({
    url: "http://localhost/project/server/typeUpdateOne.php",
    data: { id, ftype },
    success() {
      location.reload();
    },
  });
}
